<template>
  <div class="detail flex" :class="{ 'detail-active': isShowDetail }">
    <div class="detail-text flex" @click="isShowDetail = !isShowDetail">
      原题及答案解析
      <div class="img"></div>
    </div>
    <div class="detail-content" v-if="isShowDetail">
      <div class="detail-type">
        {{ singleQtsCorrectStore.currentQtsData.question_type }}
      </div>
      <RbQuestion
        v-if="fatherQuestionData"
        :questionData="fatherQuestionData"
        :option="rbqOption"
      >
      </RbQuestion>
      <RbQuestion :questionData="questionData" :option="rbqOption">
      </RbQuestion>

      <div class="detail-analysis answer">
        <div class="analysis-key">【答案】</div>
        <div class="analysis-content">
          <template v-if="topicParser.answer && topicParser.answer.length > 0">
            <div v-if="isNaN(parseFloat(topicParser.answer[0]))">
              <div v-for="(ans, index) in topicParser.answer" :key="index">
                <span v-html="ans"></span>
                <span v-if="index != topicParser.answer.length - 1">；</span>
              </div>
            </div>
            <div
              v-if="
                !isNaN(parseFloat(topicParser.answer[0])) &&
                typeof topicParser.answer[0] == 'number' &&
                topicParser?.structureType !== 5 &&
                topicParser?.structureType !== 6
              "
            >
              <div v-html="getRenderAnswer(topicParser)"></div>
            </div>
            <!-- 排序题 -->
            <div
              v-if="
                !isNaN(parseFloat(topicParser.answer[0])) &&
                typeof topicParser.answer[0] == 'number' &&
                topicParser?.structureType === 5
              "
            >
              <div v-for="(item, index) in topicParser.answer" :key="index">
                {{ item + 1 }};&nbsp;
              </div>
            </div>
            <div
              v-if="
                !isNaN(parseFloat(topicParser.answer[0])) &&
                typeof topicParser.answer[0] == 'string'
              "
            >
              <div v-for="(item, index) in topicParser.answer" :key="index">
                <div v-html="item" style="display: inline"></div>
                <span v-if="index != topicParser.answer.length - 1">；</span>
              </div>
            </div>

            <!-- 连线题 -->
            <template
              v-if="
                topicParser?.structureType == 6 &&
                topicParser.answer &&
                topicParser.options
              "
            >
              <div
                class="flex"
                v-for="(row, rowIndex) in topicParser.options[0]"
                :key="rowIndex"
              >
                <div v-html="row" class="line"></div>
                <span>——</span>
                <div
                  v-html="
                    topicParser.options[1][topicParser.answer[0][rowIndex]]
                  "
                  class="line"
                ></div>
              </div>
            </template>
          </template>
          <!-- 大题 -->
          <template
            v-else-if="
              topicParser.subQuestions && topicParser.subQuestions.length > 0
            "
          >
            <div
              class="flex"
              v-for="(item, index) in topicParser.subQuestions"
              :key="index"
            >
              <span>({{ index + 1 }})</span>
              <div v-if="item.subQuestions && item.subQuestions?.length > 0">
                <div
                  class="flex"
                  v-for="(subItem, subIndex) in item.subQuestions"
                  :key="subIndex"
                >
                  <span class="sub-index">{{ subIndex + 1 }}</span>
                  <div v-html="subItem.answer || '略'"></div>
                </div>
              </div>
              <div
                v-else-if="item.answer != ''"
                v-html="getRenderAnswer(item)"
              ></div>
              <div v-else>略</div>
            </div>
          </template>
          <template
            v-else-if="
              (!topicParser.answer || topicParser.answer.length == 0) &&
              (!topicParser.subQuestions ||
                topicParser.subQuestions.length == 0)
            "
          >
            <div>略</div>
          </template>
        </div>
      </div>
      <div class="detail-analysis">
        <div class="analysis-key">【解析】</div>
        <div class="analysis-content">
          <div v-html="topicParser.solution" v-if="topicParser.solution"></div>
          <template
            v-else-if="
              topicParser.subQuestions && topicParser.subQuestions.length > 0
            "
          >
            <div
              v-for="(item, index) in topicParser.subQuestions"
              :key="index"
              style="display: flex"
            >
              <span>({{ index + 1 }})</span>
              <div v-html="item.solution" v-if="item.solution != ''"></div>
              <div v-else>略</div>
            </div>
          </template>
          <div
            v-else-if="
              (!topicParser.solution &&
                topicParser.subQuestions &&
                topicParser.subQuestions.length == 0) ||
              (topicParser.solution == '' &&
                topicParser.subQuestions &&
                topicParser.subQuestions.length == 0) ||
              (topicParser.solution == '' && !topicParser.subQuestions)
            "
            class="summary"
          >
            略
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { cloneDeep } from 'lodash'
import RbQuestion from '@ebag/rb-question-vue3'
import QuestionParser from '@ebag/rb-question-parser'
import { useSingleQtsCorrectStore } from '@/stores/single-correct'
const singleQtsCorrectStore = useSingleQtsCorrectStore()

const isShowDetail = ref(false)
const rbqOption = ref({
  host: {
    resourceHost: 'https://contres.readboy.com/'
  },
  displayAnswer: false,
  interactive: false,
  readonly: true,
  fontSize: '0.08333rem'
})

const questionData = computed(() => {
  return setQuestionData(singleQtsCorrectStore.currentQtsData.question_detail)
})
const fatherQuestionData = computed(() => {
  return singleQtsCorrectStore.currentQtsData.father_detail
    ? setQuestionData(singleQtsCorrectStore.currentQtsData.father_detail)
    : null
})
const topicParser = computed(() => {
  return QuestionParser.parse(questionData.value, rbqOption.value)
})

const setQuestionData = data => {
  let newTopic = cloneDeep(data)
  let obj = {
    typeDetail: newTopic.type,
    data: newTopic
  }
  return obj
}

const getRenderAnswer = item => {
  if (item.structureType === 1) {
    // 单选题
    return String.fromCharCode(65 + Number(item.answer))
  } else if (item.structureType === 2) {
    // 多选题
    return (item.answer || []).map(cur => String.fromCharCode(65 + Number(cur)))
  } else if (item.structureType === 3) {
    // 判断题
    return item.answer[0] === 1 ? '错误' : '正确'
  } else {
    return item.answer
  }
}

const hiddenDetail = () => {
  isShowDetail.value = false
}

defineExpose({
  hiddenDetail
})
</script>

<style lang="less" scoped>
@baseURL: '@/assets/images/single-correct';
.detail {
  color: #666;
  font-size: 17px;
  cursor: pointer;
  position: relative;
  .img {
    margin-left: 6px;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-image: url('@{baseURL}/analysis-normal.png');
  }
  .detail-content {
    position: absolute;
    top: 26px;
    left: 119px;
    padding: 20px;
    width: 800px;
    max-height: 422px;
    overflow-y: scroll;
    border-radius: 4px;
    box-shadow: @shadow-base;
    background-color: #fff;
    z-index: 1;
    .detail-type {
      font-size: @size-big;
      color: #131313;
      margin-bottom: 16px;
      font-weight: 500;
    }
    .detail-analysis {
      display: flex;
      padding-top: 16px;
      .analysis-key {
        flex-shrink: 0;
        font-weight: 500;
        color: #181818;
        margin-right: 16px;
      }
    }
    .answer {
      border-top: 1px solid #e6e7e8;
    }
  }
}
.detail-active {
  .detail-text {
    color: @color-brand-regular;
  }
  .img {
    background-image: url('@{baseURL}/analysis-hover.png');
  }
}
</style>
